<template>
  <div class="SecondDay">
    <div class="componetsMintitle">0.事件传值
      <br>
      <el-button type="warning" plain v-on:click="childClick">子组件 -> 父组件 传值</el-button>
    </div>

    <div class="componetsMintitle">1.路由使用
      <br>
      <el-button type="success" v-on:click="gotoHome">跳转到首页</el-button>
    </div>

    <div class="componetsMintitle">2.环境变量的使用
      <br>
      <el-row tag="p" font-family="PingFang SC">环境变量：{{env}}</el-row>
    </div>

    <div class="componetsMintitle">3.axios跨域请求
      <br>
      <el-button v-if="!loading" type="primary" v-on:click="axiosRequest" round>跨域请求</el-button>
      <el-button v-else type="primary" :loading="true">请求中</el-button>
    </div>

    <div class="componetsMintitle">4.el-ui 布局
      <br>
      <el-row :gutter="20">
        <el-col :span="6" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6"  :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6"  :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6"  :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
/**
 * 传值： 基本数据类型
 * 引用： 数组 和 对象
 * */
import getRGB from "../../common/common.js";

export default {
  name: "SecondDay",
  props: {
    item: {
      title: String,
      closed: Boolean
    }
  },
  data() {
    return {
      env: process.env.VUE_APP_ZHJ,
      loading: false
    };
  },
  created() {},
  methods: {
    // 子组件 -> 父组件 传值
    childClick: function() {
      this.$emit("changeBargundColor", getRGB.getRandomColor());
    },
    gotoHome: function() {
      console.log("干啥啊");
      // 跳转到 上一次浏览的地方
      // this.$router.go(-1)
      // 跳转到指定地方
      // this.$router.replace('/')
      // 跳转到指定 路由名字路径
      // this.$router.replace({name:"basisLink"})
      //压栈式 跳转
      this.$router.push("/");
    },
    axiosRequest: function() {
      this.loading = !this.loading
      //   fetch("/apij/todos/1", {
      //   method: "get"
      // })
      //   .then(response => response.json())
      //   .then(json => console.log(json));

      console.log("开始请求");
      this.axios.get("/apij/todos/1").then(data => {
        console.log("请求结束");
        console.log(data);
      });
    }
  },

  filters: {},
  // 输入框的  监听方法
  watch: {}
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

